<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8" />
		<title>个人信息</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/mygxin.css" />
		<script src="X-admin/lib/layui/layui.js"></script>
		<script src="X-admin/js/jquery.js"></script>
		<script src="X-admin/js/xadmin.js"></script>
		<link rel="stylesheet" href="X-admin/css/xadmin.css">
		<script src="js/public.js"></script>
	</head>
	<body>
		<!------------------------------head------------------------------>
		<div class="head" id="top">
		</div>
		<script src="js/common.js"></script>
		<!------------------------------idea------------------------------>
		<div class="address mt" id="add">
			<div class="wrapper clearfix">
				<a href="index.html" class="fl">首页</a>
				<span>/</span>
				<a href="mygxin.html" class="on">个人中心</a>
			</div>
		</div>
		
		<!------------------------------Bott------------------------------>
		<div class="Bott">
			<div class="wrapper clearfix">
				<div class="zuo fl">
					<div class="zuo fl">
						<h4>
							<a href="#"><img id="person-img" style="border-radius: 60%;height: 100px;width: 100px"/></a>
							<p class="clearfix"><span id="username">[羊羊羊]</span><span class="fr">您好！</span></p>
						</h4>
						<div>
							<h4>我的订单</h4>
							<ul>
								<li><a href="myorderq.html">订单中心</a></li>
							</ul>
							<h4>个人中心</h4>
							<ul>
								<li><a href="mygxin.html">我的评价</a></li>
								<li><a href="collection.html">我的收藏</a></li>
								<li><a href="message.html">系统消息</a></li>
							</ul>
							<h4>账户管理</h4>
							<ul>
								<li><a href="mygrxx.html">个人信息</a></li>
								<li><a href="remima.html">修改密码</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="you fl">
					<div class="tx clearfix">
						<div class="fl clearfix">
							<a href="#" class="fl"><img style="width: 100px;height: 100px;border-radius:60%" id="avatar"/></a>
							<p class="fl"><span id="userna"></span><a href="mygrxx.html">修改个人信息></a></p>
						</div>
						<div class="fr" id="emails"></div>
					</div>
					<div class="layui-card-body ">
						<table id="commentList" lay-filter="test" style="text-align: center">
						</table>
						<script type="text/html" id="barDemo">
							<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">取消收藏</a>
						</script>
					</div>
				</div>
			</div>
		</div>

		<!--返回顶部-->
		<div class="gotop">
			<a href="cart.html">
			<dl>
				<dt><img src="img/gt1.png"/></dt>
				<dd>去购<br />物车</dd>
			</dl>
			</a>
			<a href="#" class="dh">
			<dl>
				<dt><img src="img/gt2.png"/></dt>
				<dd>联系<br />客服</dd>
			</dl>
			</a>
			<a href="mygxin.html">
			<dl>
				<dt><img src="img/gt3.png"/></dt>
				<dd>个人<br />中心</dd>
			</dl>
			</a>
			<a href="#" class="toptop" style="display: none">
			<dl>
				<dt><img src="img/gt4.png"/></dt>
				<dd>返回<br />顶部</dd>
			</dl>
			</a>
			<p>400-800-8200</p>
		</div>
		<div class="footer">
			<div class="top">
				<div class="wrapper">
					<div class="clearfix">
						<a href="#2" class="fl"><img src="img/foot1.png"/></a>
						<span class="fl">7天无理由退货</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="img/foot2.png"/></a>
						<span class="fl">15天免费换货</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="img/foot3.png"/></a>
						<span class="fl">满599包邮</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="img/foot4.png"/></a>
						<span class="fl">手机特色服务</span>
					</div>
				</div>
			</div>
			<p class="dibu">最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br />
			违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
		</div>
		<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/user.js" type="text/javascript" charset="utf-8"></script>

	</body>

	<script>
		var Address_Prefix = "http://localhost:9200/api-person";
		find();
		function find(){
			$.ajax({
				url:Address_Prefix+"/user/findUserById",
				data:{userid:sessionStorage.getItem("userid")},
				dataType:'json',
				type:'get',
				success:function (data){
					$("#userna").html(data.data.userna);
					$("#avatar").attr("src",data.data.avatar);
					$("#emails").html("绑定邮箱："+data.data.emails);

				}
			})
			return false;
		}
		start();
		function start() {
			layui.use('table', function () {
				var table = layui.table;
				table.render({
					id:'collid',
					elem: '#commentList',
					url: Address_Prefix+"/collection/findUserCollectionListByUserId",
					where: {
						userid: sessionStorage.getItem("userid")
					},
					parseData: function (res) {
						return {
							"code": 0,
							"msg": "",
							"count": res.data.length,
							"data": res.data
						}
					}
					, page: true//开启分页
					, cellMinWidth: 80
					, cols: [[
						{field: 'statid', title: '收藏id', width: 100,hide:true,fixed: 'left'},
						{field: 'stname', title: '收藏工位', width: 200,fixed: 'left'},
						{field: 'create', title: '收藏时间', width: 300, sort: true},
						{fixed: 'right', title: '操作', width: 100, align: 'center', toolbar: '#barDemo'}
					]]
				});
			});
		}

		layui.use('table', function () {
			var table = layui.table;
		//监听行工具事件
		table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			var data = obj.data, //获得当前行数据
					layEvent = obj.event; //获得 lay-event 对应的值
			if (layEvent === 'del') {
				layer.confirm('真的取消此条收藏么', function (index) {
							$.ajax({
								url: Address_Prefix+'/collection/cancelCollection',//地址：访问后台的地址
								data: {collid:data.collid},//前端传递给后台的数据
								type: 'get',
								dataType: 'json',//是后端传递到前端的数据格式
								success: function (data) {//后端给前端的一个反馈
									console.log(data)
									if (data.code == 0) {
										obj.del(); //删除对应行（tr）的DOM结构
										layer.close(index);
										layer.msg("取消成功！");
									} else {
										layer.msg("取消失败！");
									}
								}
							});
							return false;
						}
				)
			}
		});
		});

	</script>
</html>
